<!-- 分类管理 -->
<template>
  <div style="padding-left:20px;">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <!-- <el-form-item>
          <el-input v-model="data.id" size="medium" class="iup_width200" placeholder="分类ID"></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-input v-model="data.name" size="medium" class="iup_width200" :placeholder="$t('lan.columnName')"></el-input>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="search">{{$t('lan.query')}}</el-button>
        <el-button type="info" size="medium" @click="reset">{{$t('lan.reset')}}</el-button>
        <el-button type="primary" size="medium" @click="add('create','')">{{$t('lan.add')}}</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="getList" v-loading="loading" :element-loading-text="$t('lan.dataLoading')" empty-text border stripe>
      <div slot="empty">
        <div v-if="loading"></div>
        <div v-else>{{$t('lan.available')}}</div>
      </div>
      <el-table-column type="index" :label="$t('lan.num')" align="center" width="140"></el-table-column>
      <el-table-column prop="pname" :label="$t('lan.superiorColumn')" align="center"></el-table-column>
      <el-table-column prop="name" :label="$t('lan.columnName')" align="center" width="140"></el-table-column>
      <el-table-column prop="price" :label="$t('lan.price')" align="center">
        <template slot-scope="scope">
          <span class="green">{{common.formatAmount(scope.row.price,2)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="url" :label="$t('lan.imgAddress')" align="center">
        <template slot-scope="scope">
          <el-image class="viewer-img" :src="scope.row.url" :preview-src-list="[scope.row.url]">
          </el-image>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="pid" label="级别" align="center" width="120"></el-table-column> -->
      <el-table-column prop="sort" :label="$t('lan.sort')" align="center" width="120"></el-table-column>
      <el-table-column :label="$t('lan.operation')" align="center" min-width="260">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="add('edit',scope.row)">{{$t('lan.modify')}}</el-button>
          <el-button type="primary" size="small" @click="deputy(scope.row.id,'deputy')">{{$t('lan.subManagement')}}</el-button>
          <el-button type="primary" size="small" @click="deputy(scope.row.id,'system')">{{$t('lan.operatingSystem')}}</el-button>
          <el-button type="danger" size="small" @click="del(scope.row)">{{$t('lan.del')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页开始 -->
    <pagination :total="total" :pageData="data" @hanleSize="changePage" @hanlePage="handleSizeChange"></pagination>
    <!-- 查看下级 -->

    <!-- 新增、修改分类 -->
    <categoryModal v-if="categoryListData.showModal" @getRoleList="getRoleList" :categoryData="categoryListData"></categoryModal>

    <!-- 副柜管理 -->
    <deputyModal v-if="deputyData.showModal" @getRoleList="getRoleList" :deputyData="deputyData"></deputyModal>

    <!-- 操作系统 -->
    <systemModal v-if="systemData.showModal" @getRoleList="getRoleList" :systemData="systemData"></systemModal>
  </div>
</template>
<script>
import categoryModal from 'component/permissions/categoryModal'
import deputyModal from 'component/permissions/deputyModal'
import systemModal from 'component/permissions/systemModal'
export default {
  components: { categoryModal, deputyModal, systemModal },
  data () {
    return {
      type: "USER_LEVEL",
      getList: [],
      data: {
        pageSize: 10,
        currentPage: 1,
        id: "",
        name: ""
      },
      total: 0,
      loading: false,
      getTime: "",
      levelList: [],
      isQuery: false,//是否显示查看下级
      categoryListList: {},
      categoryListData: {},
      deputyData: {},
      systemData: {},
    };
  },
  methods: {
    // 获取字典表
    async getterm () {
      this.levelList = await this.common.enumsList(this.type)
    },
    //点击页数触发
    changePage (page) {
      this.data.currentPage = page;
      this.getRoleList();
    },
    //选择页数最多显示几条数据
    handleSizeChange (val) {
      this.data.pageSize = val;
      this.getRoleList();
    },
    //查询
    changeInput () {
      this.data.currentPage = 1;
      this.getTime();
    },
    //查询关键字
    search () {
      this.data.currentPage = 1;
      this.getRoleList();
    },
    //重置列表
    reset () {
      Object.assign(this.$data.data, this.$options.data().data); //重置列表
      this.getRoleList();
    },
    //获取列表
    async getRoleList () {
      this.loading = true;
      let url = "/category/queryPage";
      let result = await this.request.httpRequest("POST", url, this.data);
      if (result.code == 200) {
        this.total = result.data.totalRows;
        this.data.pageSize = result.data.pageSize;
        this.data.currentPage = result.data.currentPage;
        this.getList = result.data.datas;
      } else {
        this.$message({ type: "error", message: result.msg });
      }
      this.loading = false;
    },
    //删除信息
    del (row) {
      this.$confirm(this.$t('lan.delInformation'), this.$t('lan.prompt'), {
        confirmButtonText: this.$t('lan.confirm'),
        cancelButtonText: this.$t('lan.cancel'),
        type: "warning"
      }).then(async () => {
        this.loading = true;
        let url = `/category/delete/${row.id}`;
        let result = await this.request.httpRequest("DELETE", url);
        if (result.code == 200) {
          this.$message({ type: "success", message: result.msg });
          this.getRoleList();
        } else {
          this.loading = false;
          this.$message({ type: "error", message: result.msg });
        }
      });
    },
    //新增、修改
    add (type, row) {
      this.categoryListData = {
        categoryListTitle: type == "create" ? this.$t('lan.addColumn') : this.$t('lan.modifyColumn'),
        showModal: true,
        roleId: row.id || "",
        type: type
      };
    },
    deputy (id, type) {
      if (type === 'deputy') {
        this.deputyData = {
          title: this.$t('lan.subManagement'),
          showModal: true,
          id: id
        }
      } else {
        this.systemData = {
          title: this.$t('lan.operatingSystem'),
          showModal: true,
          id: id
        }
      }
    }
  },
  mounted () {
    this.getterm();
    this.getRoleList();
    this.getTime = this.helper.debounce(this.getRoleList); //防抖
  },
  created () {
    document.onkeydown = e => {
      if (e.keyCode == 13) {
        this.search();
      }
    };
  }
};
</script>
<style scoped>
.el-form {
  padding: 15px 0px !important;
}
.el-form-item {
  margin-bottom: 0px !important;
}
</style>